<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>
<body style="background-color: var(--sapBackgroundColor); height: 250px;">
<!-- playground-fold-end -->

<ui5-tabcontainer fixed id="tabContainer">
    <ui5-tab design="Positive" text="One" data-fixed="true"></ui5-tab>
    <ui5-tab design="Negative" text="Two" data-fixed="true"></ui5-tab>
    <ui5-tab design="Critical" text="Three" data-fixed="true"></ui5-tab>
    <ui5-tab-separator></ui5-tab-separator>
    <ui5-tab movable text="Four"></ui5-tab>
    <ui5-tab movable text="Five"></ui5-tab>
    <ui5-tab movable text="Six"></ui5-tab>
    <ui5-tab movable text="Seven"></ui5-tab>
    <ui5-tab movable design="Positive" text="Eight"></ui5-tab>
    <ui5-tab movable design="Negative" text="Nine"></ui5-tab>
    <ui5-tab movable design="Critical" text="Ten"></ui5-tab>
    <ui5-tab movable text="Eleven"></ui5-tab>
    <ui5-tab movable text="Twelve"></ui5-tab>
    <ui5-tab movable text="Thirteen" selected></ui5-tab>
    <ui5-tab movable text="Fourteen"></ui5-tab>
</ui5-tabcontainer>

<!-- playground-fold -->
<script type="module" src="main.js"></script>
</body>
</html>
<!-- playground-fold-end -->

